import { useMemoizedFn } from 'ahooks';
import { ModalForm, type ModalFormProps } from '@ant-design/pro-components';

export type EditModalProps<V = {}> = {
  children?: any;
  onClose?: () => void;
  onSubmit?: (res: V) => void;
} & Omit<ModalFormProps<V>, 'children'>;

function EditModal<V = {}>(props: EditModalProps<V>) {
  const { onSubmit, onClose, children, modalProps, ...rest } = props;

  const onFinish = useMemoizedFn(async (values) => {
    onSubmit?.(values);
  });

  return (
    <ModalForm<V>
      {...rest}
      layout="horizontal"
      onFinish={onFinish}
      modalProps={{
        onCancel: onClose,
        destroyOnClose: true,
        ...modalProps
      }}
    >
      <div style={{ paddingTop: 16 }}>
        {children}
      </div>
    </ModalForm>
  );
}

export default EditModal;
